import { Link } from "@tanstack/react-router";
import type { ColumnDef } from "@tanstack/react-table";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Payment = {
	id: string;
	amount: number;
	status: "pending" | "processing" | "success" | "failed";
	email: string;
};

export const columns: ColumnDef<Payment>[] = [
	{
		accessorKey: "status",
		header: "Status",
		cell: ({ row }) => (
			<div className="flex items-center gap-2">
				<Link to="/organizations/$id" key={row.id} params={{ id: row.id }}>
					<Avatar className="rounded-lg">
						<AvatarFallback className="rounded-lg hover:font-semibold">
							{row.original.status.charAt(0).toUpperCase()}
						</AvatarFallback>
					</Avatar>
				</Link>
				<div className="flex flex-col justify-between">
					<p>{row.original.status}</p>
					<p className="text-xs text-muted-foreground">{row.original.email}</p>
				</div>
			</div>
		),
	},
	{
		accessorKey: "email",
		header: "Email",
	},
	{
		accessorKey: "amount",
		header: "Amount",
	},
];
